<template>
    <div class="revie">
       <div class="contain1">
           <div class="box1">
               <span>审核状态:</span>
               <div class="but1">
                    <el-radio-group v-model="radio">
                    <el-radio :label="3" @change="a1">全部</el-radio>
                    <el-radio :label="6" @change="a2">已通过</el-radio>
                    <el-radio :label="9" @change="a3">未通过</el-radio>
                    <el-radio :label="12" @change="a4">未审核</el-radio>
                </el-radio-group>
               </div>
           </div>
           <div class="but2">
            <el-button type="primary" size="medium">导出Excel</el-button> 
           </div>
       </div>
       <div class="contain2">
            <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="date"
            label="订单编号"
            width="150">
            </el-table-column>
            <el-table-column
            prop="name"
            label="订单数量"
            width="120">
            </el-table-column>
            <el-table-column
            prop="province"
            label="大客户专员数量"
            width="120">
            </el-table-column>
            <el-table-column
            prop="city"
            label="单位名称"
            width="120">
            </el-table-column>
            <el-table-column
            prop="address"
            label="创建时间"
            width="300">
            </el-table-column>
            <el-table-column
            prop="zip"
            label="单价"
            width="120">
            </el-table-column>
            <el-table-column
            prop="zip1"
            label="支付金额"
            width="120">
            </el-table-column>
            <el-table-column
            prop="zip2"
            label="审核状态"
            width="120">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">通过</el-button>
                <el-button type="text" size="small">未通过</el-button>
            </template>
            </el-table-column>
        </el-table>
       </div>
    </div>
</template>
<script>
import Vue from 'vue';
import {
    Radio,
    Button,
    Table,
    TableColumn
} from 'element-ui';
Vue.use(Radio);
Vue.use(Button);
Vue.use(Table);
Vue.use(TableColumn);
export default {
    data() {
        return {
            tableData: [{
          date: '510882366383121268',
          name: '2',
          province: '李四',
          city: '利通机械',
          address: '2021-03-13T03:04:52.589Z',
          zip: 2,
          zip1:5,
          zip2:1,
          time:1
        },
        {
          date: '510503556635103732',
          name: '2',
          province: '李四',
          city: '利通机械',
          address: '2021-03-13T03:04:52.589Z',
          zip: 2,
          zip1:5,
          zip2:1,
          time:1
        },
        {
          date: '510145224512785060',
          name: '2',
          province: '李四',
          city: '利通机械',
          address: '2021-03-13T03:04:52.589Z',
          zip: 2,
          zip1:5,
          zip2:1,
          time:1
        },
        {
          date: '510332852608301406',
          name: '2',
          province: '李四',
          city: '利通机械',
          address: '2021-03-13T03:04:52.589Z',
          zip: 2,
          zip1:5,
          zip2:1,
          time:1
        },{
          date: '510332852608301986',
          name: '2',
          province: '李四',
          city: '利通机械',
          address: '2021-03-13T03:04:52.589Z',
          zip: 2,
          zip1:5,
          zip2:2,
          time:0
        }],
            radio:'3',
            is:[],
            abc:0
        }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      a1(){
          for(this.abc=0;this.abc<this.tableData.length;this.abc++)
          {
              this.is.push(this.tableData[this.abc])
          }
      },
      a2(){
          for(this.abc=0;this.abc<this.tableData.length;this.abc++){
              if(this.tableData[this.abc].zip2 ==1 ||this.tableData[this.abc].time ==1){
                  this.is.push(this.tableData[this.abc])
              }
          }
      },
      a3(){
           for(this.abc=0;this.abc<this.tableData.length;this.abc++){
            if(this.tableData[this.abc].zip2 !=1 ||this.tableData[this.abc].time ==1){
                this.is.push(this.tableData[this.abc])
            }
           }
      },
      a4(){
          for(this.abc=0;this.abc<this.tableData.length;this.abc++){
              if(this.tableData[this.abc].time !=1){
                  this.is.push(this.tableData[this.abc])
              }
          }
      }
      }
}
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  text-align: center;
}
div {
    display: block;
}
.revie{
height:100%;
width: 100%;
overflow: hidden;
line-height:0;}
.contain1{
    margin: 0 auto;
    margin-top: 20px;
    max-width: 1200px;
    margin-bottom: 60px;
    .box1{
    width: 200px;
    height: 21px;
    text-align: left;
    
    .but1{
        float: left;
        .el-radio{
            width: 60%;
        }
    }
    
    }
    .but2{
    width: 100px;
    margin-left: 240px;
    }
}
.el-table-border {
    border-right: none;
    border-bottom: none;
}
.contain2{
        width: 100%;
        height: 300px;
        overflow:scroll;

}
</style>